<template>
  <div class="moment-detail">
    <van-nav-bar
      title="动态详情"
      left-arrow
      @click-left="router.back()"
    />

    <div class="content" v-if="moment">
      <!-- 用户信息 -->
      <div class="user-info">
        <van-image :src="moment.avatar" round width="40" height="40" />
        <div class="info">
          <div class="name">{{ moment.username }}</div>
          <div class="time">{{ formatTime(moment.createdAt) }}</div>
        </div>
      </div>

      <!-- 文本内容 -->
      <div class="text">{{ moment.content }}</div>

      <!-- 图片区域 -->
      <div class="images" v-if="moment.images?.length">
        <van-image
          v-for="(img, index) in moment.images"
          :key="index"
          :src="img"
          fit="cover"
          @click="previewImage(moment.images, index)"
        />
      </div>

      <!-- 位置信息 -->
      <div class="location" v-if="moment.location">
        <van-icon name="location-o" />
        <span>{{ moment.location }}</span>
      </div>

      <!-- 互动区域 -->
      <div class="actions">
        <div class="like" @click="toggleLike">
          <van-icon :name="isLiked ? 'like' : 'like-o'" :class="{ active: isLiked }" />
          <span>{{ likeCount }}</span>
        </div>
        <div class="share" @click="onShare">
          <van-icon name="share-o" />
          <span>分享</span>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading">
      <van-loading type="spinner" />
    </div>

    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="showShare"
      title="分享到"
      :options="shareOptions"
      @select="onSelectShare"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showImagePreview } from 'vant'
import { getMomentDetail, likeMoment, unlikeMoment } from '@/api/moments'
import { formatTime } from '@/utils/format'
import type { MomentItem } from '@/api/moments'

const router = useRouter()
const route = useRoute()
const moment = ref<MomentItem | null>(null)
const isLiked = ref(false)
const likeCount = ref(0)
const showShare = ref(false)

// 分享选项
const shareOptions = [
  { name: '微信', icon: 'wechat' },
  { name: '朋友圈', icon: 'wechat-moments' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
]

// 获取动态详情
const fetchMomentDetail = async () => {
  try {
    const { data } = await getMomentDetail(route.params.id as string)
    moment.value = data.data
    likeCount.value = data.data.likes
  } catch (error) {
    showToast('获取动态详情失败')
  }
}

// 点赞/取消点赞
const toggleLike = async () => {
  try {
    if (isLiked.value) {
      await unlikeMoment(moment.value!.id)
      likeCount.value--
    } else {
      await likeMoment(moment.value!.id)
      likeCount.value++
    }
    isLiked.value = !isLiked.value
  } catch (error) {
    showToast('操作失败')
  }
}

// 预览图片
const previewImage = (images: string[], startPosition: number) => {
  showImagePreview({
    images,
    startPosition,
    closeable: true,
  })
}

// 打开分享面板
const onShare = () => {
  showShare.value = true
}

// 选择分享方式
const onSelectShare = (option: { name: string; icon: string }) => {
  showShare.value = false
  showToast(`分享到${option.name}`)
}

onMounted(() => {
  fetchMomentDetail()
})
</script>

<style scoped lang="less">
.moment-detail {
  min-height: 100vh;
  background: #f8f8f8;

  .content {
    background: #fff;
    padding: 16px;

    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;

      .info {
        flex: 1;

        .name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }

        .time {
          font-size: 12px;
          color: #999;
        }
      }
    }

    .text {
      font-size: 15px;
      color: #333;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px;

      .van-image {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        border-radius: 8px;
        overflow: hidden;
      }
    }

    .location {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #666;
      margin-bottom: 16px;

      .van-icon {
        font-size: 16px;
      }
    }

    .actions {
      display: flex;
      justify-content: space-around;
      padding-top: 16px;
      border-top: 1px solid #f5f5f5;

      .like,
      .share {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        color: #666;
        cursor: pointer;

        .van-icon {
          font-size: 20px;

          &.active {
            color: #ee0a24;
          }
        }
      }
    }
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
}
</style>
